<template>
<div class="bh-notification" :class="[typeClass]">
	<div class="bh-notification__group">
		<div class="bh-notification__title">{{title}}</div>
		<div class="bh-notification__content">
			<p>{{message}}</p>
		</div>
		<button class="bh-notification__closeBtn" @click="close()">
			<bh-icon class="bh-message-box__close" name="close"></bh-icon>
		</button>
	</div>
</div>
</template>

<script>
export default {
	name: 'bh-notification',
	props: {
	},
	data() {
		return {
			title: '',
			message: '',
			type: 'info',
			duration: 3000,
			timer: null,
			closed: false,
		}
	},
	methods: {
		destroyElement() {
			this.$destroy(true);
			this.$el.parentNode.removeChild(this.$el);
		},
		close() {
			this.visible = false;
			this.destroyElement();
		},
		clearTimer() {
			clearTimeout(this.timer);
		},
		startTimer() {
			if (this.duration > 0) {
				this.timer = setTimeout(() => {
					if (!this.closed) {
						this.close();
					}
				}, this.duration);
			}
		},
	},
	computed: {
		typeClass() {
			return `right bh-message--${ this.type }`;
		},
	},
	mounted() {
		this.startTimer();
		document.addEventListener('keydown', this.keydown);
    },
}
</script>
